<template>
  <div :class="styles.auntCard" @click="() => toDetail(resume.id)">
    <div :class="styles.auntCardLeft">
      <image :class="styles.img" :src="resume.avatar || defaultAvatar" />
    </div>
    <div :class="styles.auntCardRight">
      <div :class="styles.auntCardRightTop">
        <span>{{ resume.name }}</span>
        <span>
          <span :class="styles.price">
            {{
              +resume.lowSalary === 0 || +resume.highSalary === 0
                ? '面议'
                : `${resume.lowSalary}-${resume.highSalary}`
            }}</span
          >/26天
        </span>
      </div>
      <div :class="styles.auntCardRightCategory">
        <span :class="styles.tagbg">{{ resume.category }}</span>
        <span :class="styles.tagbg">{{ resume.workLimit }}年</span>
      </div>
      <div :class="styles.auntCardRightBaseinfo">
        <span>{{ resume.age }}岁</span>
        <span :class="styles.seg">|</span>
        <span>{{ resume.city }}</span>
        <span :class="styles.seg">|</span>
        <span>服务{{ resume.households || 0 }}户</span>
      </div>
      <div :class="styles.auntCardRightBottom">
        <span
          v-for="label in resume.certificate && resume.certificate.split(',')"
          :class="styles.tag"
          :key="label"
        >
          {{ label }}
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Taro from '@tarojs/taro';
import { toRef } from 'vue';

import styles from './index.module.less';
import { addHistoryCache } from '@/utils/cache';
import { defaultAvatar } from '@/const/images';

export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },

  setup(props) {
    const resume = toRef(props, 'data');

    const toDetail = (id) => {
      addHistoryCache({
        id: resume.value.id,
        name: resume.value.name,
        avatar: resume.value.avatar || defaultAvatar,
      });
      Taro.navigateTo({
        url: `/subpackages/commodity/index?id=${id}`,
      });
    };

    return {
      styles,
      resume,
      toDetail,
      defaultAvatar,
    };
  },
};
</script>
